* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

.course-details {
    nav {
        width: 100%;
        height: 0.88rem;
        background-color: #fff;
        padding: 0 0.3rem 0 0;
        img {
            width: 0.6rem;
            display: block;
            float: right;
            // margin: 0.26rem;
            position: relative;
            top: 50%;
            right: 0.26rem;
            transform: translateY(-50%);
        }
    }
    main {
        margin-bottom: 4rem;
        > p {
            font-size: 0.36rem;
            text-align: center;
            padding: 0.4rem 0;
        }
        .pic {
            width: 80%;
            margin: 0.3rem auto;
            border-radius: 0.1rem;
            overflow: hidden;
            img {
                width: 100%;
            }
        }
        .content {
            width: 80%;
            margin: 0 auto;
            p {
                font-size: 0.3rem;
                line-height: 0.5rem;
                text-indent: 0.6rem;
            }
        }
        .play-list {
            width: 80%;
            margin: 0 auto;
            padding: 0.3rem 0;
            background-color: #fff;
            position: fixed;
            left: 50%;
            bottom: 0;
            transform: translateX(-50%);
            .progress-bar {
                display: flex;
                font-size: 0.2rem;
                padding-bottom: 0.3rem;
                // position: relative;
                span {
                    &:first-of-type, &:last-of-type {
                        flex: 1;
                    }
                    &:last-of-type {
                        text-align: right;
                    }
                    &:nth-of-type(2) {
                        flex: 3;
                        height: 0.06rem;
                        background-color: gray;
                        border-radius: 0.5rem;
                        position: relative;
                        top: 0.14rem;
                    }
                }
            }
            .play-btn {
                display: flex;
                padding-bottom: 0.6rem;
                span {
                    flex: 1;
                    img {
                        width: 34%;
                        vertical-align: middle;
                    }
                    &:nth-of-type(2), &:nth-of-type(3), &:nth-of-type(4) {
                        text-align: center;
                        img {
                            width: 70%;
                            padding: 0.14rem;
                            border: 1px solid #ddd;
                            border-radius: 50%;
                        }
                    }
                    &:nth-of-type(3) {
                        margin: 0 0.4rem;
                        img {
                            width: 100%;
                            padding: 0.24rem;
                        }
    
                    }
                    &:last-of-type {
                        text-align: right;
                    }
                }
            }
            .interact-btn {
                display: flex;
                span {
                    flex: 1;
                    font-size: 0.24rem;
                    text-align: center;
                    img {
                        width: 20%;
                    }
                }
            }
        }
    }
}


//  添加圆形边框：给图片添加border和border-radius 和padding
//  图片水平居中：vertical-align: middle;
//  图片垂直居中: text-align: center;